<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title> 家計簿　</title>
<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
    <script type="text/javascript" src="js/circle.js"></script>
    <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
    <script type="text/javascript" src="js/dateselect.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/account.css" rel="stylesheet" type="text/css">
  </head>
<body>
  {% include "_menu.html" %}
  <form id="account" action="/chartgraph" method="get">
    <div id="chart_graph">
        <span class="bold">表示単位</span>
        <input type="radio" id="c_year" name="chart" value="year" onclick="javascript:changeInput();" checked="checked">
          年指定
        </input>
        <input type="radio" id="c_month" name="chart" value="month" onclick="javascript:changeInput();">月指定</input>
      <div id="chart_year"></div>
      <div id="chart_month"></div>
    </div>
    <input type="submit" style="margin-top:10px;" value="グラフ表示" onclick="dataSend(); return false;"/>
  </form>
  <div id="container_chart">
    <canvas id="chart_canvas" width="800" height="600"></canvas>
  </div>
  <script type="text/javascript">
    var cCanvas = null;
    function dataSend()
    {
      var json=null;
      var url = null;
      var callBack = null;
      $('container_chart').childElements().each(function(n){if(n.id=="chart_canvas"){return;}n.remove();});
      cCanvas = new html5jp.graph.circle("chart_canvas");
      url = '/chartGraph.json';
      callBack = makeChartGraph;
      var a = new Ajax.Request( 
          url,
          { 
              "method": "get", 
              "parameters": Form.serialize('account') + "&" + makeTemporaryQuery(),
              "sanitizeJSON":true,
              onSuccess: function(request) { 
                var clean = request.responseText.gsub(/</,"&lt;").gsub(/>/,"&gt;").gsub(/'/,"&apos;");
                var dataSet = clean.evalJSON(true);
                callBack(dataSet);
              }, 
              onFailure: function(request) { 
                  alert('読み込みに失敗しました'); 
              }, 
              onException: function (request) { 
                  alert('読み込み中にエラーが発生しました'); 
              } 
          } 
      ); 
    }
    function makeChartGraph(accountData)
    {
      var params = {};
      var items = new Array();
      var nothing = true;
      for(ac in accountData)
      {
        if(accountData[ac] != 0)
        {
          nothing = false;
          items.push([ac,accountData[ac]])
        }
      }
      if(nothing){
        alert("表示できるデータがありません。");
        return;
      }
      sortItems = items.sort(function(a,b){return b[1] - a[1];});
      cCanvas.draw(sortItems,params);
    }
    function changeInput(type)
    {
      if($('c_year').checked)
      {
        $('chart_month').hide();
        $('chart_year').show();
      }
      else
      {
        $('chart_year').hide();
        $('chart_month').show();
      }
    }
    window.onload = function() {
      var dateObj = new Date();
      var chartYearSelector = new DateSelector('cy','chart_year',null,dateObj.getFullYear(),1,1);
      $('cy_month_span').hide();
      $('cy_day_span').hide();
      $('cy_weekday_span').hide();
      var chartMonthSelector = new DateSelector('cm','chart_month',null,dateObj.getFullYear(),dateObj.getMonth()+1,1);
      $('cm_day_span').hide();
      $('cm_weekday_span').hide();
      changeInput();
    };
  </script>
</body>
</html>
